
<template>
  <div>
    <!--批量询运费-->
    <el-dialog
      title="询价询运费"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="900px"
    >
      <div>
        <el-form
          size="mini"
          :model="sendForm"
          label-width="100px"
          ref="sendForm"
          :rules="rules"
        >
          <div>
            <el-table
              size="mini"
              :header-cell-style="{ background: '#f8f8f9', color: '#80878f' }"
              :data="sendForm.goodLineList"
              border
              style="width: 100%; margin: 20px 0"
            >
              <el-table-column width="150" align="center" label="客户名称">
                <template slot-scope="scope">
                  <el-form-item label-width="0px" style="margin-bottom: 0px">
                    {{ scope.row.customerName }}
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column width="150" align="center" label="品名牌号">
                <template slot-scope="scope">
                  <el-form-item label-width="0px" style="margin-bottom: 0px">
                    {{ scope.row.goodsName }}/{{ scope.row.goodsSn }}
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="数量（吨）" width="100" align="center">
                <template slot-scope="scope">
                  <el-form-item label-width="0px" style="margin-bottom: 0px">
                    {{ scope.row.goodsNum }}
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="收货地址" width="150" align="center">
                <template slot-scope="scope">
                  <el-form-item label-width="0px" style="margin-bottom: 0px">
                    {{ scope.row.receiveArea }}
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="发货地" width="150" align="center">
                <template slot-scope="scope">
                  <el-form-item label-width="0px" style="margin-bottom: 0px">
                    {{ scope.row.sendArea }}
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="收货方式" min-width="100" align="center">
                <template slot-scope="scope">
                  <el-form-item label-width="0px" style="margin-bottom: 0px">
                    {{ scope.row.sendTypes }}
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="物流备注" min-width="180" align="center">
                <template slot-scope="scope">
                  <el-form-item label-width="0px" style="margin-bottom: 0px">
                    <el-input
                      placeholder="物流备注：如加托"
                      v-model="scope.row.freightRemark"
                      clearable
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleConfirm" :loading="btnLoading"
          >确 认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { batchInquiryFreight } from "@/api/allInLine/inquiry";
import { mapGetters } from "vuex";
import { Message } from "element-ui";
const defaultSendForm = {
  goodLineList: [],
};
const defeaultGoodLineItem = {
  inquiryId: "",
  priceId: "",
  operateType: "inquiryFreight",
  customerName: "",
  goodsSn: "",
  goodsName: "",
  goodsNum: "",
  receiveArea: "",
  sendArea: "",
  sendTypes: "",
  freightRemark: "",
};
export default {
  name: "index",
  data() {
    return {
      dialogVisible: false,
      btnLoading: false,
      sendForm: JSON.parse(JSON.stringify(defaultSendForm)),
      sendForm2: [],
      rules: {},
      goodsList: [],
      diQuIds: [],
    };
  },
  computed: {
    ...mapGetters(["name", "mobile", "userId"]),
  },
  components: {},
  created() {
  },
  filters: {},
  methods: {
    // showPop9() {
    //   this.$refs.addGoodsSn.showPop();
    // },
    // showPop8() {
    //   this.$refs.addCustomer.showPop8();
    // },

    //显示询价
    showPop(type, data) {
      this.dialogVisible = true;
      this.sendForm = JSON.parse(JSON.stringify(defaultSendForm));
      data.forEach((item) => {
        const el = JSON.parse(JSON.stringify(defeaultGoodLineItem));
        el.customerName = item.customerName ? item.customerName : "";
        el.goodsSn = item.goodsSn ? item.goodsSn : "";
        el.goodsName = item.goodsName ? item.goodsName : "";
        el.goodsNum = item.goodsNum ? item.goodsNum : "";
        el.receiveArea = item.receiveArea ? item.receiveArea : "";
        el.sendArea = item.sendArea ? item.sendArea : "";
        el.sendTypes = item.sendTypes ? item.sendTypes : "";
        el.priceId = item.priceId ? item.priceId : "";
        el.freightRemark = "";
        this.sendForm.goodLineList.push(el);
      });
    },
    //关闭询价
    handleClose() {
      this.dialogVisible = false;
    },

    //确认询运费
    handleConfirm() {
      this.btnLoading = true;
      this.sendForm2 = [];
      this.sendForm.goodLineList.forEach((el) => {
        this.sendForm2.push({
          priceId: el.priceId,
          freightRemark: el.freightRemark,
        });
      });
      batchInquiryFreight({
        reqParams:[...this.sendForm2]
      }).then((res) => {
          this.dialogVisible = false;
          Message.success("询价成功");
          this.btnLoading = false;
          this.$emit("update");
        }).catch(() => {
          this.btnLoading = false;
        });
    },

    //删除商品
    delGoods(index) {
      this.sendForm.goodLineList.splice(index, 1);
    },
    //增加商品
    addGoods() {
      this.sendForm.goodLineList.push(
        JSON.parse(JSON.stringify(defeaultGoodLineItem))
      );
    },
  },
};
</script>

<style  lang="scss">
</style>

